<template>
  <div class="agricultural-knowledge">
    <!-- 头部 -->
    <div class="header-section">
      <div class="header-title">
        <el-icon class="title-icon"><Reading /></el-icon>
        <h1>农业知识库</h1>
      </div>
      <div class="header-subtitle">
        <p>专业农业知识分享，助力您的农业生产</p>
      </div>
    </div>

    <!-- 知识分类筛选 -->
    <div class="filter-section">
      <el-card class="filter-card">
        <div class="filter-content">
          <div class="filter-item">
            <span class="filter-label">知识分类：</span>
            <el-radio-group v-model="activeCategory" @change="handleCategoryChange">
              <el-radio-button label="">全部</el-radio-button>
              <el-radio-button label="种植技术">种植技术</el-radio-button>
              <el-radio-button label="病虫害防治">病虫害防治</el-radio-button>
              <el-radio-button label="养殖技术">养殖技术</el-radio-button>
              <el-radio-button label="农业机械">农业机械</el-radio-button>
              <el-radio-button label="市场分析">市场分析</el-radio-button>
            </el-radio-group>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 知识列表 -->
    <div class="knowledge-section">
      <el-row :gutter="24">
        <el-col :span="8" v-for="article in filteredArticles" :key="article.id">
          <el-card class="knowledge-card" shadow="hover">
            <template #header>
              <div class="article-header">
                <el-tag :type="getCategoryTagType(article.category)" size="small">
                  {{ article.category }}
                </el-tag>
                <span class="article-date">{{ formatDate(article.publishTime) }}</span>
              </div>
              <h3 class="article-title">{{ article.title }}</h3>
            </template>

            <div class="article-image">
              <el-image
                :src="article.image"
                fit="cover"
                class="knowledge-image"
                :preview-src-list="[article.image]"
              >
                <template #error>
                  <div class="image-error">
                    <el-icon><Picture /></el-icon>
                  </div>
                </template>
              </el-image>
            </div>

            <div class="article-content">
              <p class="article-summary">{{ article.summary }}</p>
              <div class="article-meta">
                <div class="expert-info">
                  <el-avatar :size="24" :src="article.expertAvatar" />
                  <span class="expert-name">{{ article.expertName }}</span>
                  <span class="expert-title">{{ article.expertTitle }}</span>
                </div>
                <div class="article-stats">
                  <span class="view-count">
                    <el-icon><View /></el-icon>
                    {{ article.viewCount }}
                  </span>
                </div>
              </div>
            </div>

            <template #footer>
              <div class="article-footer">
                <el-button type="primary" text @click="viewArticleDetail(article)">
                  <el-icon><Reading /></el-icon>
                  阅读全文
                </el-button>
              </div>
            </template>
          </el-card>
        </el-col>
      </el-row>

      <!-- 分页 -->
      <div class="pagination-section">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="totalArticles"
          layout="total, prev, pager, next, jumper"
          @current-change="handlePageChange"
        />
      </div>
    </div>

    <!-- 文章详情对话框 -->
    <el-dialog
      v-model="showArticleDetail"
      :title="selectedArticle?.title"
      width="800px"
      class="article-dialog"
    >
      <div v-if="selectedArticle" class="article-detail">
        <div class="detail-header">
          <div class="detail-meta">
            <el-tag :type="getCategoryTagType(selectedArticle.category)" size="small">
              {{ selectedArticle.category }}
            </el-tag>
            <span class="publish-time">{{ formatDate(selectedArticle.publishTime) }}</span>
            <span class="view-count">
              <el-icon><View /></el-icon>
              {{ selectedArticle.viewCount }} 阅读
            </span>
          </div>
          <div class="expert-info">
            <el-avatar :size="32" :src="selectedArticle.expertAvatar" />
            <div class="expert-details">
              <div class="expert-name">{{ selectedArticle.expertName }}</div>
              <div class="expert-title">{{ selectedArticle.expertTitle }}</div>
            </div>
          </div>
        </div>

        <div class="detail-image">
          <el-image
            :src="selectedArticle.image"
            fit="cover"
            class="detail-main-image"
          />
        </div>

        <div class="detail-content">
          <div v-html="selectedArticle.content"></div>
        </div>

        <div class="detail-footer">
          <el-button @click="showArticleDetail = false">关闭</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  Reading, Picture, View, ChatDotRound
} from '@element-plus/icons-vue'

const router = useRouter()

// 响应式数据
const activeCategory = ref('')
const currentPage = ref(1)
const pageSize = ref(9)
const totalArticles = ref(0)
const showArticleDetail = ref(false)
const selectedArticle = ref(null)

// 知识文章数据
const knowledgeArticles = ref([
  {
    id: 1,
    title: '西红柿高产种植技术要点',
    category: '种植技术',
    image: 'https://images.unsplash.com/photo-1546470427-e212b7d31075?w=400&h=300&fit=crop',
    summary: '详细介绍西红柿从育苗到收获的全过程技术要点，包括土壤准备、施肥管理、病虫害防治等关键环节。',
    content: `
      <h3>一、土壤准备</h3>
      <p>选择排水良好、富含有机质的沙壤土，pH值在6.0-6.8之间...</p>
      
      <h3>二、育苗技术</h3>
      <p>选用优质种子，在温室内进行育苗，保持适宜的温度和湿度...</p>
      
      <h3>三、田间管理</h3>
      <p>合理密植，及时整枝打杈，保证通风透光...</p>
      
      <h3>四、病虫害防治</h3>
      <p>主要防治早疫病、晚疫病、白粉病等常见病害...</p>
    `,
    expertId: 1,
    expertName: '张教授',
    expertTitle: '农业种植专家',
    expertAvatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop',
    publishTime: '2024-01-20T10:00:00Z',
    viewCount: 1560
  },
  {
    id: 2,
    title: '黄瓜常见病虫害识别与防治',
    category: '病虫害防治',
    image: 'https://images.unsplash.com/photo-1449300079327-02f967c1c1e7?w=400&h=300&fit=crop',
    summary: '全面解析黄瓜生长过程中常见的病虫害症状识别方法，提供科学的防治方案。',
    content: '详细内容...',
    expertId: 2,
    expertName: '李博士',
    expertTitle: '植物保护专家',
    expertAvatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop',
    publishTime: '2024-01-19T14:30:00Z',
    viewCount: 1280
  },
  {
    id: 3,
    title: '现代化农业机械使用指南',
    category: '农业机械',
    image: 'https://images.unsplash.com/photo-1586771107445-d3ca888129ce?w=400&h=300&fit=crop',
    summary: '介绍各类现代化农业机械的使用方法、维护保养要点，提高农业生产效率。',
    content: '详细内容...',
    expertId: 3,
    expertName: '王工程师',
    expertTitle: '农业机械专家',
    expertAvatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&h=100&fit=crop',
    publishTime: '2024-01-18T09:15:00Z',
    viewCount: 980
  }
])

// 计算属性
const filteredArticles = computed(() => {
  let filtered = knowledgeArticles.value
  if (activeCategory.value) {
    filtered = filtered.filter(article => article.category === activeCategory.value)
  }
  totalArticles.value = filtered.length
  return filtered
})

// 方法
const formatDate = (dateString) => {
  return new Date(dateString).toLocaleDateString('zh-CN')
}

const getCategoryTagType = (category) => {
  const types = {
    '种植技术': 'success',
    '病虫害防治': 'warning',
    '养殖技术': 'primary',
    '农业机械': 'info',
    '市场分析': 'danger'
  }
  return types[category] || 'info'
}

const handleCategoryChange = () => {
  currentPage.value = 1
}

const handlePageChange = (page) => {
  currentPage.value = page
}

const viewArticleDetail = (article) => {
  selectedArticle.value = article
  showArticleDetail.value = true
  // 模拟增加阅读量
  article.viewCount++
}

onMounted(() => {
  // 初始化数据
})
</script>

<style scoped>
.agricultural-knowledge {
  padding: 24px;
  background: #f5f7fa;
  min-height: 100vh;
}

/* 头部样式 */
.header-section {
  text-align: center;
  margin-bottom: 24px;
  padding: 40px 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  color: white;
}

.header-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 12px;
}

.title-icon {
  font-size: 40px;
}

.header-title h1 {
  margin: 0;
  font-size: 36px;
  font-weight: 700;
}

.header-subtitle p {
  margin: 0;
  font-size: 18px;
  opacity: 0.9;
}

/* 筛选区域 */
.filter-section {
  margin-bottom: 24px;
}

.filter-card {
  border-radius: 12px;
}

.filter-content {
  padding: 16px 0;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.filter-label {
  color: #606266;
  font-weight: 500;
  white-space: nowrap;
}

/* 知识卡片 */
.knowledge-section {
  margin-bottom: 24px;
}

.knowledge-card {
  border-radius: 12px;
  margin-bottom: 24px;
  transition: all 0.3s ease;
}

.knowledge-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.article-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.article-date {
  font-size: 12px;
  color: #909399;
}

.article-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #2d3748;
  line-height: 1.4;
}

.article-image {
  margin-bottom: 16px;
}

.knowledge-image {
  width: 100%;
  height: 200px;
  border-radius: 8px;
}

.image-error {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #c0c4cc;
  font-size: 32px;
}

.article-summary {
  color: #718096;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3; /* 标准写法，增强兼容性 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.expert-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.expert-name {
  font-size: 14px;
  font-weight: 500;
  color: #2d3748;
}

.expert-title {
  font-size: 12px;
  color: #909399;
}

.article-stats {
  display: flex;
  align-items: center;
  gap: 16px;
}

.view-count {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #909399;
}

.article-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 分页 */
.pagination-section {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

/* 文章详情对话框 */
.article-dialog {
  border-radius: 16px;
}

.article-detail {
  padding: 8px 0;
}

.detail-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.detail-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.publish-time, .view-count {
  font-size: 14px;
  color: #909399;
}

.expert-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.expert-details {
  display: flex;
  flex-direction: column;
}

.expert-name {
  font-weight: 600;
  color: #2d3748;
}

.expert-title {
  font-size: 14px;
  color: #909399;
}

.detail-image {
  margin-bottom: 24px;
}

.detail-main-image {
  width: 100%;
  height: 300px;
  border-radius: 12px;
}

.detail-content {
  line-height: 1.8;
  color: #4a5568;
  margin-bottom: 24px;
}

.detail-content h3 {
  color: #2d3748;
  margin: 24px 0 12px 0;
}

.detail-content p {
  margin-bottom: 16px;
}

.detail-footer {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid #f0f0f0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .agricultural-knowledge {
    padding: 16px;
  }
  
  .header-title {
    flex-direction: column;
    gap: 8px;
  }
  
  .header-title h1 {
    font-size: 28px;
  }
  
  .filter-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .article-footer {
    flex-direction: column;
    gap: 12px;
  }
  
  .article-footer .el-button {
    width: 100%;
  }
}
</style>